<template>
    <div>
        <h1 ref="h1" v-text="msg"></h1>
        <button ref="btn" @click="getPreDOM">点我获取上方的DOM元素</button>
        <School ref="sch"/>
        <School id="sch" ref="sch"/>
    </div>
</template>

<script>
// 引入School
import School from './components/School.vue'

export default {
    name:'App',
    data(){
        return {
            msg:'欢迎学习Vue',
        }
    },
    components:{
        School,
    },
    methods: {
        getPreDOM(){
            console.log('id_sch',document.getElementById('sch'))   // 获取组件的模板元素
            console.log('h1',this.$refs.h1);    //真实DOM元素
            console.log('所有',this.$refs);     //真实DOM元素
            console.log('button',this.$refs.btn);   //真实DOM元素
            console.log('ref_sch',this.$refs.sch);  //School组件实例对象（vc）
        }
    },
}
</script>

<style>

</style>